<template>
  <div class="dialog-container">
    <div class="dialog-content">
      <el-upload
        ref="upload"
        :show-file-list="false"
        :accept="accept"
        action=""
        :before-upload="handleBeforeUpload"
        :on-success="handleSuccess"
        :on-progress="handleProgress"
        :http-request="handleUpload"
        list-type="picture-card"
      >
        <i class="el-icon-plus" />
      </el-upload>
      <div
        v-if="status !== 'init'"
        class="img-box"
      >
        <div
          v-if="status === 'uploading'"
          class="icon-box icon-loading"
        >
          <i class="el-icon-loading" />
          <p class="text">上传中...</p>
        </div>
        <img
          v-if="imageUrl"
          :src="imageUrl"
          class="img"
        />
        <div
          v-if="status === 'success'"
          class="icon-success"
        >
          <i class="el-icon-check" />
        </div>
        <div
          v-if="status === 'success'"
          class="icon-box icon-delete"
        >
          <img
            v-viewer="viewerOptions"
            :src="imageUrl"
            class="img hidden"
          />
          <div class="line">
            <i
              class="el-icon-delete"
              @click.stop.prevent="handleDelete()"
            />
          </div>
        </div>
        <div
          v-if="status === 'error'"
          class="icon-box icon-error"
        >
          <div class="line">
            <i
              class="el-icon-refresh-right"
              @click.stop.prevent="handleRetry()"
            />
            <i
              class="el-icon-delete"
              @click.stop.prevent="handleDelete()"
            />
          </div>
          <p class="text">重试</p>
        </div>
      </div>
    </div>
    <div class="text-tip">支持上传jpg,png格式图片,最大不超过10MB</div>
  </div>
</template>

<script>
import { upyunUpload } from '@/utils/upyun'

export default {
  name: 'ImageUpload',
  props: {
    watermark: {
      type: Boolean,
      default: false
    },
    infoType: {
      type: String,
      default: 'asset'
    }
  },
  data() {
    return {
      accept: 'image/jpeg,image/jpg,image/png',
      status: 'init', // init, uploading, success, error
      imageUrl: '',
      file: null,
      viewerOptions: {
        button: true,
        navbar: false,
        title: true,
        toolbar: false,
        tooltip: false,
        movable: false,
        zoomable: true,
        rotatable: false,
        scalable: true,
        transition: false,
        fullscreen: false,
        keyboard: true
      }
    }
  },
  watch: {
    imageUrl(val) {
      this.$emit('change', val)
    }
  },
  mounted() {},
  methods: {
    setValue(value) {
      if (!value) {
        return
      }
      this.imageUrl = value
      this.status = 'success'
    },
    // 上传前
    handleBeforeUpload(file) {
      const isRightSize = file.size / 1024 / 1024 < 10
      if (!isRightSize) {
        this.$message.error('文件大小超过 10MB')
      }
      return isRightSize
    },
    // 上传中
    handleProgress(event, file, fileList) {},
    // 上传成功
    handleSuccess(response, file, fileList) {},
    // 删除图片
    handleDelete() {
      this.status = 'init'
      this.imageUrl = ''
    },
    // 重新上传
    handleRetry() {
      this.handleUpload()
    },
    // 自定义上传
    handleUpload(param) {
      let file = this.file
      if (param) {
        this.file = file = param.file
      }
      this.status = 'uploading'
      upyunUpload({
        file: file,
        watermark: this.watermark,
        info_type: this.infoType
      })
        .then((res) => {
          if (res) {
            this.status = 'success'
            this.imageUrl = res
          }
        })
        .catch(() => {
          this.status = 'error'
          this.imageUrl = ''
        })
    },
    // 重置
    reset() {
      this.status = 'init'
      this.imageUrl = ''
    }
  }
}
</script>

<style scoped lang="scss">
.img-box {
  width: 80px;
  height: 80px;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #c0ccda;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 8px 8px 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  font-size: 12px;
  color: #ffffff;
  .img {
    width: 100%;
    height: 100%;
    user-select: none;
    object-fit: cover;
    &.hidden {
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0.1;
    }
  }
  .icon-success {
    position: absolute;
    right: -15px;
    top: -6px;
    width: 40px;
    height: 24px;
    background: #13ce66;
    text-align: center;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
    i {
      font-size: 12px;
      margin-top: 11px;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      display: block;
      color: #ffffff;
    }
  }
  .icon-box {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    font-size: 20px;
    .text {
      font-size: 12px;
    }
    .line {
    }
  }
  .icon-loading i {
    font-size: 20px;
  }
  .icon-delete {
    display: none;
  }
  .icon-delete,
  .icon-error {
    i {
      font-size: 20px;
      color: #ffffff;
      cursor: pointer;
    }
    .line {
      padding: 10px 10px 0;
      width: 100%;
      margin-bottom: 6px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      position: relative;
      z-index: 10;
    }
  }
  &:hover {
    .icon-delete {
      display: flex;
    }
  }
}
.dialog-content {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
::v-deep .el-upload {
  margin: 0 8px 8px 0;
  width: 80px;
  height: 80px;
}
::v-deep .el-upload--picture-card {
  line-height: 90px;
}
</style>
